<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../js/layui/css/layui.css">
<script type="text/javascript" src="../js/layui/layui.js"></script>
</head>
<style>
.layui-table-cell {
	height: auto;
}
</style>

<body>
<div id="updateOrder" style="display : none">
    	   <form action="" onsubmit="return false" id="form_order">
    	   	 <div class="layui-form-item">
		     <input type="hidden" name="id" id="id" />
		    <label class="layui-form-label">物流单号</label>
		    <div class="layui-input-block">
		      <input type="text" id="wuLiuDanHao" name="wuLiuDanHao" style="width:200px" placeholder="请输入物流单号" autocomplete="off" class="layui-input">
		    </div>
		    <label class="layui-form-label">物流公司</label>
		    <div class="layui-input-block">
		      <input type="text" id="wuLiu" name='wuLiu' style="width:200px" placeholder="请输入物流公司" autocomplete="off" class="layui-input">
		    </div>
		     <label class="layui-form-label">运费</label>
		    <div class="layui-input-block">
		      <input type="text" id="yunFei" name='yunFei' style="width:200px" value='0元' placeholder="请输入" autocomplete="off" class="layui-input">
		    </div>
		    <input type="hidden" name='fahuo' value='已发货' id='fahuo'>
		    <button style="margin-left:50px" onclick="updateOrderByOrderid()" class="layui-btn layui-btn-normal">发货</button>
		  </div>
    	   
    	   </form>
    </div>
	<div>
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">名称</label>
					<div class="layui-input-inline">
						<input type="tel" name="name1" id="name1" 
							autocomplete="off" class="layui-input">
					</div>
					<label class="layui-form-label">产地</label>
					<div class="layui-input-inline">
						<select name="address1" id="address1" lay-filter="aihao">
							<option value=""></option>
						</select>
					</div>
					<label class="layui-form-label">材质</label>
					<div class="layui-input-inline">
						<select name="watchBand1" id="watchBand1" lay-filter="aihao">
							<option value="" selected=""></option>
							
						</select>
					</div>
					<label class="layui-form-label">风格</label>
					<div class="layui-input-inline">
						<select name="style1" id="style1" lay-filter="aihao">
							<option value="" selected=""></option>
							
						</select>
					</div>
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-inline">
						<select name="username" id="username1" lay-filter="aihao">
							<option value=""></option>
							
						</select>
					</div>
					<label class="layui-form-label">是否发货</label>
					<div class="layui-input-inline">
						<select name="fahuo1" id="fahuo1" lay-filter="aihao">
							<option value="" selected=""></option>
							
						</select>
					</div>
					<label class="layui-form-label">是否收货</label>
					<div class="layui-input-inline">
						<select name="shouhuo1" id="shouhuo1" lay-filter="aihao">
							<option value="" selected=""></option>
							
						</select>
					</div>
					<div class="layui-input-inline">
						<button type="submit" class="layui-btn" lay-submit=""
							lay-filter="chaXun">查询</button>
					</div>
				</div>
			</div>
		</form>
	</div>
	<table id="demo" lay-filter="test"></table>
 
	<script>
	var table,form,layer,$;
	layui.use(['table','form','layer'], function(){
	   table = layui.table;
	   form = layui.form;
	   layer = layui.layer;
	   $ = layui.$;
	  //第一个实例
	  table.render({
	    elem: '#demo'
	    ,limit:5
	    ,id:'orderformTable'
	    ,url: '../getOrder' //数据接口
	    ,page: true //开启分页
	    ,cols: [[ //表头
	      {field: 'bianHao', title: '订单编号', width:80, sort: true}
	      ,{field: 'name', title: '产品名称',templet:function(product){
	    	  return product.product.name
	      }}
	      ,{field: 'username', title: '用户名', width: 80,templet:function(user){
	    	  return user.user.username
	      }}
	      ,{field: 'phone', title: '联系方式', width: 135, sort: true,templet:function(user){
	    	  return user.user.phone
	      }}
	      ,{field: 'fahuo', title: '发货情况', width: 135, sort: true,templet :function(d){
    		  if(d.fahuo=="已发货"){
    			  return "已发货"
    		  }else if(d.fahuo=="未发货"){
    			  return "<button onclick='fahuo2("+d.id+")' class='layui-btn layui-btn-normal'>未发货</button>"
    		  }
    	  }}
	      ,{field: 'shouhuo', title: '收货情况', width: 135, sort: true}
	    ]]
	  });
	  form.on('submit(chaXun)', function(data){
		  table.reload('orderformTable',{
			  where: { //设定异步数据接口的额外参数，任意设
			   		name:$("#name1").val(),
			   		address:$("#address1").val(),
			   		watchBand:$("#watchBand1").val(),
			   		style:$("#style1").val(),
			   		username:$("#username1").val(),
			   		fahuo:$("#fahuo1").val(),
			   		shouhuo:$("#shouhuo1").val(),
			  }
			  ,page: {
			    curr: 1 //重新从第 1 页开始
			  }
			});
		  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
	  

	  
	  $(function(){
			$.post("../chanDi",{},function(res){
			 console.log(res)
				for(var i=0;i<res.length;i++){
						$("#address1").append(`
								<option value="${res[i].address}">${res[i].address}</option>
							`)
				}
					form.render("select");		 
			 },"json")
		}) 
		  
		  $(function(){
				$.post("../caiZhi",{},function(res){
				 console.log(res)
					for(var i=0;i<res.length;i++){
							$("#watchBand1").append(`
									<option value="${res[i].watchBand}">${res[i].watchBand}</option>
								`)
					}
						form.render("select");		 
				 },"json")
			}) 
			  
			  $(function(){
					$.post("../fengGe",{},function(res){
					 console.log(res)
						for(var i=0;i<res.length;i++){
								$("#style1").append(`
										<option value="${res[i].style}">${res[i].style}</option>
									`)
						}
							form.render("select");		 
					 },"json")
				}) 

				  
				  $(function(){
						$.post("../yongHuMing",{},function(res){
						 console.log(res)
							for(var i=0;i<res.length;i++){
									$("#username1").append(`
											<option value="${res[i].username}">${res[i].username}</option>
										`)
							}
								form.render("select");		 
						 },"json")
					}) 
					  
					  $(function(){
							$.post("../shiFouFaHuo",{},function(res){
							 console.log(res)
								for(var i=0;i<res.length;i++){
										$("#fahuo1").append(`
												<option value="${res[i].fahuo}">${res[i].fahuo}</option>
											`)
								}
									form.render("select");		 
							 },"json")
						}) 
						  
						  $(function(){
								$.post("../shiFouShouHuo",{},function(res){
								 console.log(res)
									for(var i=0;i<res.length;i++){
											$("#shouhuo1").append(`
													<option value="${res[i].shouhuo}">${res[i].shouhuo}</option>
												`)
									}
										form.render("select");		 
								 },"json")
							}) 
							
							
	});
	
	
	
	 
    function fahuo2(id){
    	$("#id").val(id);
    	layer.open({
      	  type : 1,
      	  title : '您正在发货',
      	  content :$("#updateOrder"),
      	  area :['400px','300px']
        })
    }
	
	 function updateOrderByOrderid(){
      	$.post("../updateFaHuo",$("#form_order").serialize(),function(res){
				layer.msg(res.msg);            		
				if(res.code=="0"){
					layer.closeAll();
					table.reload("orderformTable")
				}
      	},"json")
      }
	</script>
</body>
</html>